import React, { PureComponent } from 'react'
import { withRouter } from '../hoc'

export class HomeSongMenu extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      songMenus: [
        { id: 111, name: '华语歌单' },
        { id: 112, name: '古典歌单' },
        { id: 113, name: '民谣歌单' },
      ],
    }
  }

  render() {
    const { songMenus } = this.state

    return (
      <div>
        <h2>HomeSongMenu</h2>
        <ul>
          {songMenus.map((item) => (
            <li onClick={(e) => this.navigateToDetial(item.id)} key={item.id}>
              {item.name}
            </li>
          ))}
        </ul>
      </div>
    )
  }

  navigateToDetial(id) {
    console.log(this.props.router)
    const { navigate } = this.props.router
    navigate('/detail/' + id)
  }
}

export default withRouter(HomeSongMenu)
